import React, {useEffect, useState} from 'react';
import axios from 'axios'
import LoadingSpinner from "../components/LoadingSpinner";
import InlineError from "../components/InlineError";
import * as errmsg from '../constants'

export default function ExtraLinks() {
    const [loading, setLoading] = useState(true);
    const [links, setLinks] = useState([])
    const [error, setError] = useState('')

    useEffect(() => {
        axios.get('/api/v1/posts/get_links/')
            .then(response => {
                setLoading(false)
                setLinks(response.data.results)
                setError('')
            })
            .catch(err => {
                setLoading(false)
                setLinks([])
                setError(errmsg.CUSTOM_ERROR_MSG)
            })
    }, [])

    const linkList = (
        links.map(link => <li key={link.id}><a href={link.url} className="link-dark">{link.name}</a></li>)
    )

    if (loading) return <LoadingSpinner/>
    if (error) return <InlineError error={error}/>

    return (
        <div className="px-4 mb-3">
            <h4 className="border-bottom mb-3">链接</h4>
            <ol className="list-unstyled mb-0">
                {linkList}
            </ol>
        </div>
    );
};
